<template>
	<view class="login">
		<view class="login-head">
			<view class="head-box">
				<view class="logo">
					<view class="" style="position: absolute;left: 20rpx;top: 22rpx;z-index: 999;" @click="goback()">
						<svg t="1730859753212" class="icon" viewBox="0 0 1024 1024" version="1.1"
							xmlns="http://www.w3.org/2000/svg" p-id="4250" width="18" height="18">
							<path
								d="M474.496 512l338.752-338.752-90.496-90.496L293.504 512l429.248 429.248 90.496-90.496z"
								fill="#A6B2C0" p-id="4251"></path>
						</svg>
					</view>
					<!-- <image @click="goback()" class="close" src="../../static/img/close.png" mode=""></image> -->
					<view class="title">修改资金密码</view>
				</view>
				<view class="">
					
				</view>
		
			</view>
		</view>
		<view class="main">
			<view class="con">
				<view class="color-b font-28 mt-20">
					原资金密码
				</view>
				<view class="common">
					<input class="input" v-model="old_password" :type="psdtype" placeholder="请输入资金密码" placeholder-class="place" />
					<image class="mimashowhide" v-if="showmima" @click="changemimashowhide()" src="../../static/img/mimahide.png" mode=""></image>
					<image class="mimashowhide" v-else @click="changemimashowhide()" src="../../static/img/mimashow.png" mode=""></image>
				</view>
				<view class="color-b font-28 mt-20">
					新资金密码
				</view>
				<view class="common">
					<input class="input" v-model="password" :type="psdtype2" placeholder="请输入新资金密码" placeholder-class="place" />
					<image class="mimashowhide" v-if="showmima2" @click="changemimashowhide2()" src="../../static/img/mimahide.png" mode=""></image>
					<image class="mimashowhide" v-else @click="changemimashowhide2()" src="../../static/img/mimashow.png" mode=""></image>
				</view>
				<view class="color-b font-28 mt-20">
					确认资金密码
				</view>
				<view class="common">
					<input class="input" v-model="password_confirmation" :type="psdtype3" placeholder="请再次确认资金密码" placeholder-class="place" />
					<image class="mimashowhide" v-if="showmima3" @click="changemimashowhide3()" src="../../static/img/mimahide.png" mode=""></image>
					<image class="mimashowhide" v-else @click="changemimashowhide3()" src="../../static/img/mimashow.png" mode=""></image>
				</view>
				
				<view class="login-btn" @click="logins()">提交</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	import { login,reset_qk_password } from '../../api/api.js'
	export default{
		data(){
			return{
				name:'',
				psd:'',
				showmima:true,
				psdtype:'password',
				showmima2:true,
				psdtype2:'password',
				showmima3:true,
				psdtype3:'password',
				forgotpsd:false,
				old_password:'',
				password:'',
				password_confirmation:'',
			}
		},
		methods:{
			changemimashowhide(){
				if(this.showmima){
					this.showmima = false
					this.psdtype = 'text'
				}else{
					this.showmima = true
					this.psdtype = 'password'
				}
			},
			changemimashowhide2(){
				if(this.showmima2){
					this.showmima2 = false
					this.psdtype2 = 'text'
				}else{
					this.showmima2 = true
					this.psdtype2 = 'password'
				}
			},
			changemimashowhide3(){
				if(this.showmima3){
					this.showmima3 = false
					this.psdtype3 = 'text'
				}else{
					this.showmima3 = true
					this.psdtype3 = 'password'
				}
			},
			goregister(){
				uni.navigateTo({
					url:'/pages/login/register'
				})
			},
			checkboxChange(e){
				this.forgotpsd = !this.forgotpsd
			},
			goback(){
				uni.navigateBack({
					delta:1
				})
				// uni.reLaunch({
				// 	url:'/pages/index/index'
				// })
			},
			logins(){
				let that = this;
				
				if(this.old_password == ''){
					uni.showToast({
						title: '请输入密码',
						icon:'error',
						duration: 2000
					});
					return false
				}
				if(this.password == ''){
					uni.showToast({
						title: '请输入新密码',
						icon:'error',
						duration: 2000
					});
					return false
				}
				if(this.password_confirmation == ''){
					uni.showToast({
						title: '请输入确认密码',
						icon:'error',
						duration: 2000
					});
					return false
				}
				if(this.password_confirmation !=this.password){
					uni.showToast({
						title: '密码不一致',
						icon:'error',
						duration: 2000
					});
					return false
				}
				let datas = {
					old_password:this.old_password,
					password:this.password,
					password_confirmation:this.password_confirmation
				}
				reset_qk_password(datas).then(res => {
					if(res.data.status.errorCode == 0){
						uni.showToast({
							title: res.data.status.msg,
							icon:'success',
							duration: 2000
						});
						console.log(that.forgotpsd)
						
					}else{
						uni.showToast({
							title: res.data.status.msg,
							icon:'error',
							duration: 2000
						});
					}
				}).catch(err => {
					console.log(err)
				})
			}
		}
	}
</script>

<style scoped>
	*{
		box-sizing: border-box;
	}
	.color-b {
		color: #fff;
	}
	
	.font-28 {
		font-size: 28rpx;
		margin-bottom: 20rpx;
	}
	.mt-20{
		margin-top: 20rpx;
	}
	.login {
		width: 100%;
		min-height: 100vh;
		background-color: #202327;
		display: flex;
		flex-direction: column;
		/* height: 100%; */
		/* background: url('../static/img/anquan.png') #24262b no-repeat center -.66667rem; */
		background-size: contain;
		width: 100%;
		/* height: 514rpx; */
	}
	
	.login-head {
		
		/* background: url('../../static/img/loginbg.jpg') no-repeat center 50rpx; */
		/* background-size: cover; */
	}
	
	.head-box {
		width: 100%;
		/* padding: 32rpx 40rpx 0 40rpx; */
		display: flex;
		justify-content: center;
		align-items: center;
		/* flex-direction: column; */
	
	}
	.logo {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.logo .logoimg{
		width: 148rpx;
		height: 80rpx;
	}
	.logo .close{
		width: 38rpx;
		height: 38rpx;
	}
	.notes{
		text-align: center;
		align-self: flex-end;
		margin-top: 108rpx;
		color: #fff;
	}
	h4{
		font-weight: 700;
		font-size: 34rpx;
		line-height: 40rpx;
	}
	b{
		color: #27d477;
	}
	.sub{
		line-height: 30rpx;
		color: #9ba6b3;
		font-size: 24rpx;
	}
	.title {
		text-align: center;
		/* font-weight: 600; */
		font-size: 30rpx;
		/* margin-top: 52rpx; */
		padding: 20rpx 0;
		color: #fff;
	}
	.main{
		margin-top: -60rpx;
		position: relative;
	}
	.con{
		width: 100%;
		padding: 48rpx 40rpx 60rpx 40rpx;
		margin-top: 86rpx;
	}
	.common{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-direction: column;
		flex-wrap: nowrap;
		position: relative;
		margin-bottom: 20rpx;
	}
	.input{
		height: 100rpx;
		width: 100%;
		border: 0;
		padding: 24rpx 40rpx;
		border-radius: 4rpx;
		background: #1a1c20;
		overflow: visible;
		font-size: 28rpx;
		color: #fff;
	}
	.place{
		font-size: 24rpx;
		color: #7c7c7c;
	}
	.mimashowhide{
		width: 34rpx;
		height: 34rpx;
		padding: 0 16rpx;
		position: absolute;
		top: 50%;
		right: 16rpx;
		margin-top: -17rpx;
		box-sizing: content-box;
	}
	.remember-forget{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 24rpx;
		color: #fff;
	}
	/deep/ .uni-label-pointer{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	/deep/ .uni-checkbox-input{
		width: 26rpx;
		height: 26rpx;
		margin-right: 0;
		box-sizing: border-box;
		background-color: transparent;
		border-color: #33d47e;
		margin-top: -6rpx;
	}
	/deep/ .uni-checkbox-input svg{
		transform: translate(-50%, -48%) scale(0.5);
	}
	.remember-forget text{
		margin-left: 10rpx;
	}
	.login-btn{
		width: 100%;
		height: 64rpx;
		margin-top: 40rpx;
		margin-bottom: 20rpx;
		font-size: 26rpx;
		text-align: center;
		line-height: 64rpx;
		border-radius: 12rpx;
		background: #fee619;
		font-weight: 700;
		color: #1c1e22;
		box-shadow: 0 8rpx 0 0 #d9a715, inset 0 0 24rpx 6rpx rgba(243, 48, 48, .34), 0 4rpx 12rpx 6rpx rgba(255, 123, 1, .34);
	}
	.to-regist{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.left{
		color: #97a6b4;
		font-size: 28rpx;
		font-weight: 600;
	}
	.left text{
		color: #33d47e;
		font-size: 32rpx;
	}
	.to-regist image{
		width: 34rpx;
		height: 32rpx;
	}
</style>